<template>
  <div id="home">
    <h1>我是Home</h1>
    <el-button @click="getDataMethod">默认按钮</el-button>

    <el-button type="success" @click="increment">加一按钮</el-button>

    <el-button type="warning" @click="decrease">减一按钮</el-button>

    <p>当前最新得值为：{{this.$store.state.count}}</p>

    <p>当前最新得值：{{count}}</p>

    <p>todo得值为：{{this.$store.getters.getTodoById(1)}}</p>
    <p>todo得值为：{{getTodoById(1)}}</p>
  </div>

</template>



<script >


import {getData} from "@/api/index";
import store from "@/store";
import {mapGetters, mapState} from "vuex";



export default {
  name: 'home',
  store: store,
  data(){
    return {}
  },
  mounted() {
   /* getData().then((data)=>{
      console.log(data)
    })*/
  },
  methods: {
    getDataMethod(){
      getData().then((data)=>{
        console.log(data)
        alert(data.data.name);
      })
    },

    increment() {
      this.$store.commit('ADD')
      console.log(this.$store.state.count)
    },
    decrease(){
      this.$store.commit('decrease')
      console.log(this.$store.state.count)
    }

  },
  computed:{
    ...mapState(['count']),
    ...mapGetters(["getTodoById","getAllTodo"])

  }



}
</script>

